<template>
  <div class="member">
    <el-row justify="space-between" class="headline">
      <el-col :span="2">
        <span>添加成员</span>
      </el-col>
      <el-col :span="2">
        <el-button @click="goback" size="small">返回</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10" :offset="6">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
          <el-form-item label="创建账号" prop="account">
            <el-input v-model="ruleForm.account" placeholder="登录账号" />
          </el-form-item>
          <el-form-item label="成员姓名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="邮箱地址" prop="emil">
            <el-input v-model="ruleForm.emil" />
          </el-form-item>
          <el-form-item label="所属部门" prop="department">
            <el-select v-model="ruleForm.department">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属角色" prop="role">
            <el-select v-model="ruleForm.role">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item class="tip">
            <span>选择所属部门后默认继承部门权限，可在成员列表中单独设置权限</span>
          </el-form-item>
          <el-form-item label="登录密码" prop="passwd">
            <el-input v-model="ruleForm.passwd" />
          </el-form-item>
          <el-form-item label="确认密码" prop="again">
            <el-input v-model="ruleForm.again" />
          </el-form-item>
          <el-form-item label="允许登录">
            <el-switch v-model="value1" />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item>
            <el-button>提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import router from "@/router";
import $tab from "@/plugins/tab.js";

const route = useRoute();
const plugins = getCurrentInstance;

const formSize = ref("default");
const ruleForm = reactive({
  account: "", //账号
  name: "", //姓名
  phone: "", //手机号
  emil: "", //邮箱
  department: "", //部门
  role: "", //角色
  passwd: "", //密码
  again: "", //确认密码
  allow: "", //允许
  remark: "", //备注
});
const value1 = ref(true);
const rules = reactive({
  account: [{ required: true, message: "请填写账号", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请填写姓名",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请填写手机号",
      trigger: "blur",
    },
  ],
  emil: [
    {
      required: true,
      message: "请填写邮箱",
      trigger: "blur",
    },
  ],
  department: [
    {
      required: true,
      message: "请选择部门",
      trigger: "change",
    },
  ],
  role: [
    {
      required: true,
      message: "请选择角色",
      trigger: "change",
    },
  ],
  passwd: [
    {
      required: true,
      message: "请填写密码",
      trigger: "change",
    },
  ],
  again: [
    {
      required: true,
      message: "请填写密码",
      trigger: "change",
    },
  ],
});

// const submitForm = async (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   await formEl.validate((valid, fields) => {
//     if (valid) {
//       console.log("submit!");
//     } else {
//       console.log("error submit!", fields);
//     }
//   });
// };
function goback() {
  const obj = { path: "/system/member", name: "member" };
  $tab.closePage(obj);
  router.go(-1);
}
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: center;
  padding: 5px 0;
}
.member :deep(.el-row) {
  margin-bottom: 20px;
}
.tip :deep(.el-form-item__content) {
  font-size: 12px;
}
</style>
